<template>
  <div class="ItemMiddleBottom-wrapper" @mouseleave="type = 'auto'">
    <div class="ItemMiddleBottom-content">
      <div class="ItemMiddleBomMap">
        <div
          class="ItemMiddleMapTitle"
          v-for="(item, index) in middleCityList"
          :key="index"
          :id="'mapViewMiddleCity' + index"
          :style="{ 'z-index': item.topZIndex }"
          @click="cityIconNameClick(index, 'click')"
        >
          <span
            class="mapView_icon"
            v-if="
              item.zgswjgdm == '11101910000' || item.zgswjgdm == '11101920000'
            "
          ></span>
          {{ item.zgswjgmc }}
        </div>
        <img :src="mapImgUrl" alt class="d-b mapImg" />
        <div
          class="mapModal_wrapper"
          v-if="index > -1"
          :style="{ top: modalTop + 'px', left: modalLeft + 'px' }"
        >
          <div class="mapModal_content">
            <div class="mapModal_title">
              {{ middleCityList[index].zgswjgmc }}税务局
            </div>
            <div class="mapModal_bottom">
              <div class="mapModal_bottom_item">
                <div class="mapModalBottomItem_label">累计正常户</div>
                <div class="detail">
                  <div
                    class="mapModalBottomItem_number"
                    style="white-space: nowrap"
                  >
                    <span style="color: #9fe5ff">{{
                      middleCityList[index].zcnsr
                    }}</span>
                    <span style="color: #6fbfee">户</span>
                  </div>
                  <div
                    class="mapModalBottomItem_number"
                    style="font-size: 16px; white-space: nowrap"
                  >
                    <span style="color: #ffffff">占比：</span>
                    <span style="color: #ffffff"
                      >{{ middleCityList[index].zcnsrzb }}%</span
                    >
                  </div>
                </div>
              </div>
              <div class="mapModal_bottom_item" style="margin-top: 12px">
                <div class="mapModalBottomItem_label">本年累计税费</div>
                <div class="detail">
                  <div
                    class="mapModalBottomItem_number"
                    style="white-space: nowrap"
                  >
                    <span>{{ middleCityList[index].nljsfsr }}</span>
                    <span>亿元</span>
                  </div>
                  <div
                    class="mapModalBottomItem_number"
                    style="font-size: 16px; white-space: nowrap"
                  >
                    <span style="color: #ffffff">占比：</span>
                    <span style="color: #ffffff"
                      >{{ middleCityList[index].nljsfsrzb }}%</span
                    >
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <img src="~@/assets/images/map-foot.png" alt class="mapFootImg" />
    </div>
  </div>
</template>

<script>
const Area = [
  "昌平区",
  "门头沟区",
  "房山区",
  "大兴区",
  "通州区",
  "丰台区",
  "石景山区",
  "海淀区",
  "西城区",
  "东城区",
  "朝阳区",
  "顺义区",
  "平谷区",
  "延庆区",
  "密云区",
  "怀柔区",
  "燕山区",
  "经开区",
];

import ChangPing from "@/assets/images/mapViewImg/map-changping.png";
import MenTouGou from "@/assets/images/mapViewImg/map-mentougou.png";
import FangShan from "@/assets/images/mapViewImg/map-fangshan.png";
import DaXing from "@/assets/images/mapViewImg/map-daxing.png";
import TongZhou from "@/assets/images/mapViewImg/map-tongzhou.png";
import FengTai from "@/assets/images/mapViewImg/map-fengtai.png";
import ShiJingShan from "@/assets/images/mapViewImg/map-shijingshan.png";
import XiCheng from "@/assets/images/mapViewImg/map-xicheng.png";
import DongCheng from "@/assets/images/mapViewImg/map-dongcheng.png";
import ChaoYang from "@/assets/images/mapViewImg/map-chaoyang.png";
import ShunYi from "@/assets/images/mapViewImg/map-shunyi.png";
import PingGu from "@/assets/images/mapViewImg/map-pinggu.png";
import YanQing from "@/assets/images/mapViewImg/map-yanqing.png";
import MiYun from "@/assets/images/mapViewImg/map-miyun.png";
import HuaiRou from "@/assets/images/mapViewImg/map-huairou.png";
import HaiDian from "@/assets/images/mapViewImg/map-haidian.png";

export default {
  name: "sstjzb",
  data() {
    return {
      prevDate: "",
      yearDate: "",
      timer: null,
      index: -1,
      type: "auto",
      mapImgUrl: ChangPing,
      modalTop: 0,
      modalLeft: 0,
      middleCityList: [],
    };
  },
  created() {
    let date = "";
    let month = new Date().getMonth() + 1;
    let year = new Date().getFullYear();
    date = year + "-" + month;
    this.prevDate = date;
    this.yearDate = year;
  },
  beforeDestroy() {
    clearInterval(this.timer);
    this.timer = null;
  },
  mounted() {
    this.ajax({
      url: "/dpzsSycxService/sstjzbQuery",
      method: "post",
      data: {
        param: {
          tjnd: this.yearDate,
        },
      },
    }).then((res) => {
      res = res.data;
      if (res.rtnCode !== "200") {
        this.$message.error(res.rtnMsg);
        return;
      }
      this.middleCityList = res.data.tjList;
      this.middleCityList = Area.map((item) => {
        let current = this.middleCityList.find(
          (i) => i.zgswjgmc == item //昌平
        );
        return current;
      });
      this.middleCityList.forEach((item) => {
        this.$set(item, "topZIndex", 2);
      });
      this.cityIconNameClick(Area.indexOf("朝阳区"));
    });
    this.timer = setInterval(() => {
      if (this.type == "click") return;
      let num;
      if (this.index == this.middleCityList.length - 1) {
        num = 0;
      } else {
        num = this.index + 1;
      }
      this.cityIconNameClick(num);
    }, 3000);
  },
  methods: {
    cityIconNameClick(index, type = "auto") {
      this.index = index;
      this.type = type;
      let item = this.middleCityList[index];
      switch (item.zgswjgdm) {
        case "11101140000": //昌平0
          this.modalTop = 0;
          this.modalLeft = 0;
          this.mapImgUrl = ChangPing;
          break;
        case "11102290000": //延庆1
          this.modalTop = -109;
          this.modalLeft = 10;
          this.mapImgUrl = YanQing;
          break;
        case "11102270000": //怀柔2
          for (let key in this.middleCityList) {
            if (this.middleCityList[key].zgswjgdm === "11102290000") {
              //延庆3
              this.middleCityList[key].topZIndex = 8;
            } else {
              this.middleCityList[key].topZIndex = 2;
            }
          }
          this.modalTop = -86;
          this.modalLeft = 150;
          this.mapImgUrl = HuaiRou;
          break;
        case "11102280000": //密云4
          this.modalTop = -86;
          this.modalLeft = 268;
          this.mapImgUrl = MiYun;
          break;
        case "11101130000": //顺义5
          for (let key in this.middleCityList) {
            if (
              this.middleCityList[key].zgswjgdm === "11101140000" || //昌平6
              this.middleCityList[key].zgswjgdm === "11102270000" //怀柔7
            ) {
              this.middleCityList[key].topZIndex = 8;
            } else {
              this.middleCityList[key].topZIndex = 2;
            }
          }
          this.modalTop = 30;
          this.modalLeft = 200;
          this.mapImgUrl = ShunYi;
          break;
        case "11102260000": //平谷
          for (let key in this.middleCityList) {
            if (
              this.middleCityList[key].zgswjgdm === "11102270000" || //怀柔
              this.middleCityList[key].zgswjgdm === "11102280000" //密云
            ) {
              this.middleCityList[key].topZIndex = 8;
            } else {
              this.middleCityList[key].topZIndex = 2;
            }
          }
          this.modalTop = 0;
          this.modalLeft = 340;
          this.mapImgUrl = PingGu;
          break;
        case "11101090000": //门头沟
          this.modalTop = 83;
          this.modalLeft = -92;
          this.mapImgUrl = MenTouGou;
          break;
        case "11101110000": //房山
          this.modalTop = 190;
          this.modalLeft = -60;
          this.mapImgUrl = FangShan;
          break;
        case "11101910000": //燕山
          this.modalTop = 212;
          this.modalLeft = -170;
          this.mapImgUrl = FangShan;
          break;
        case "11102240000": //大兴
          for (let key in this.middleCityList) {
            if (
              this.middleCityList[key].zgswjgdm === "11101140000" || //昌平
              this.middleCityList[key].zgswjgdm === "11101020000" || //西城
              this.middleCityList[key].zgswjgdm === "11101010000" || //东城
              this.middleCityList[key].zgswjgdm === "11101110000" //房山
            ) {
              this.middleCityList[key].topZIndex = 8;
            } else {
              this.middleCityList[key].topZIndex = 2;
            }
          }
          this.modalTop = 242;
          this.modalLeft = 74;
          this.mapImgUrl = DaXing;
          break;
        case "11101920000": //经开
          for (let key in this.middleCityList) {
            if (
              this.middleCityList[key].zgswjgdm === "11101140000" || //昌平
              this.middleCityList[key].zgswjgdm === "11101020000" || //西城
              this.middleCityList[key].zgswjgdm === "11101010000" || //东城
              this.middleCityList[key].zgswjgdm === "11101110000" //房山
            ) {
              this.middleCityList[key].topZIndex = 8;
            } else {
              this.middleCityList[key].topZIndex = 2;
            }
          }
          this.modalTop = 200;
          this.modalLeft = 130;
          this.mapImgUrl = DaXing;
          break;
        case "11101120000": //通州
          for (let key in this.middleCityList) {
            if (
              this.middleCityList[key].zgswjgdm === "11101080000" || //海淀
              this.middleCityList[key].zgswjgdm === "11101130000" || //顺义
              this.middleCityList[key].zgswjgdm === "11101020000" || //西城
              this.middleCityList[key].zgswjgdm === "11101050000" || //朝阳
              this.middleCityList[key].zgswjgdm === "11101010000" || //东城
              this.middleCityList[key].zgswjgdm === "11101070000" //石景山
            ) {
              this.middleCityList[key].topZIndex = 8;
            } else {
              this.middleCityList[key].topZIndex = 2;
            }
          }
          this.modalTop = 156;
          this.modalLeft = 205;
          this.mapImgUrl = TongZhou;
          break;
        case "11101050000": //朝阳
          for (let key in this.middleCityList) {
            if (
              this.middleCityList[key].zgswjgdm === "11101080000" || //海淀
              this.middleCityList[key].zgswjgdm === "11101140000" //昌平
            ) {
              this.middleCityList[key].topZIndex = 8;
            } else {
              this.middleCityList[key].topZIndex = 2;
            }
          }
          this.modalTop = 102;
          this.modalLeft = 118;
          this.mapImgUrl = ChaoYang;
          break;
        case "11101080000": //海淀
          this.modalTop = 72;
          this.modalLeft = 10;
          this.mapImgUrl = HaiDian;
          break;
        case "11101070000": //石景山
          for (let key in this.middleCityList) {
            if (
              this.middleCityList[key].zgswjgdm === "11101080000" || //海淀
              this.middleCityList[key].zgswjgdm === "11101090000" || //门头沟
              this.middleCityList[key].zgswjgdm === "11101140000" //昌平
            ) {
              this.middleCityList[key].topZIndex = 8;
            } else {
              this.middleCityList[key].topZIndex = 2;
            }
          }
          this.modalTop = 116;
          this.modalLeft = -5;
          this.mapImgUrl = ShiJingShan;
          break;
        case "11101060000": //丰台
          this.modalTop = 175;
          this.modalLeft = -5;
          this.mapImgUrl = FengTai;
          break;
        case "11101020000": //西城
          for (let key in this.middleCityList) {
            if (
              this.middleCityList[key].zgswjgdm === "11101080000" || //海淀
              this.middleCityList[key].zgswjgdm === "11101090000" || //门头沟
              this.middleCityList[key].zgswjgdm === "11101070000" //石景山
            ) {
              this.middleCityList[key].topZIndex = 8;
            } else {
              this.middleCityList[key].topZIndex = 2;
            }
          }
          this.modalTop = 124;
          this.modalLeft = 69;
          this.mapImgUrl = XiCheng;
          break;
        case "11101010000": //东城
          for (let key in this.middleCityList) {
            if (
              this.middleCityList[key].zgswjgdm === "11101080000" || //海淀
              this.middleCityList[key].zgswjgdm === "11101090000" || //门头沟
              this.middleCityList[key].zgswjgdm === "11101070000" //石景山
            ) {
              this.middleCityList[key].topZIndex = 8;
            } else {
              this.middleCityList[key].topZIndex = 2;
            }
          }
          this.modalTop = 124;
          this.modalLeft = 90;
          this.mapImgUrl = DongCheng;
          break;
      }
    },
  },
};
</script>

<style scoped lang="scss">
.ItemMiddleBottom-wrapper {
  width: 926px;
  height: 746px;
}

.ItemMiddleBottom-content {
  position: relative;
  padding-top: 60px;
  padding-bottom: 80px;
}

.ItemMiddleBomMap {
  position: relative;
  margin: 0 auto;
  width: 756px;
  height: 641px;
}

.mapImg {
  width: 756px;
  height: 641px;
}

.ItemMiddleMapTitle {
  position: absolute;
  font: 700 22px/24px "Adobe Heiti";
  color: #ffffff;
  z-index: 2;
  cursor: pointer;
}
.mapView_icon {
  display: inline-block;
  width: 13px;
  height: 13px;
  background: #ffffff;
  background: url("~@/assets/images/icon-point.png") no-repeat;
}
.MapTitle_changPing,
#mapViewMiddleCity0 {
  top: 241px;
  left: 290px;
}
.MapTitle_menTouGou,
#mapViewMiddleCity1 {
  top: 325px;
  left: 99px;
}
.MapTitle_FangShan,
#mapViewMiddleCity2 {
  bottom: 190px;
  left: 220px;
}
.MapTitle_DaXing,
#mapViewMiddleCity3 {
  left: 354px;
  bottom: 137px;
}
.MapTitle_TongZhou,
#mapViewMiddleCity4 {
  right: 196px;
  bottom: 218px;
}
.MapTitle_FengTai,
#mapViewMiddleCity5 {
  left: 293px;
  bottom: 229px;
}
.MapTitle_ShiJingShan,
#mapViewMiddleCity6 {
  left: 219px;
  top: 351px;
}
.MapTitle_HaiDian,
#mapViewMiddleCity7 {
  left: 282px;
  top: 315px;
}
.MapTitle_XiCheng,
#mapViewMiddleCity8 {
  left: 323px;
  top: 358px;
}
.MapTitle_DongCheng,
#mapViewMiddleCity9 {
  left: 397px;
  top: 375px;
}
.MapTitle_ChaoYang,
#mapViewMiddleCity10 {
  right: 284px;
  top: 344px;
}
.MapTitle_ShunYi,
#mapViewMiddleCity11 {
  right: 222px;
  top: 266px;
}
.MapTitle_PingGu,
#mapViewMiddleCity12 {
  right: 66px;
  bottom: 375px;
}
.MapTitle_YanQing,
#mapViewMiddleCity13 {
  left: 290px;
  bottom: 488px;
}
.MapTitle_MiYun,
#mapViewMiddleCity14 {
  right: 160px;
  top: 160px;
}
.MapTitle_HuaiRou,
#mapViewMiddleCity15 {
  top: 164px;
  right: 268px;
}
.MapTitle_HuaiRou,
#mapViewMiddleCity16 {
  bottom: 160px;
  left: 110px;
}
.MapTitle_HuaiRou,
#mapViewMiddleCity17 {
  left: 410px;
  bottom: 180px;
}

/*弹出框样式*/
.mapModal_wrapper {
  position: absolute;
  width: 317px;
  height: 236px;
  background: url("~@/assets/images/mapViewImg/mapModel_bgc.png") no-repeat;
  background-size: 100% 100%;
  z-index: 9;
}
.mapModal_content {
  width: 317px;
  height: 236px;
}
.mapModal_title {
  font: 700 24px/1 "Adobe Heiti";
  color: #ffffff;
  white-space: nowrap;
  padding-left: 12px;
  height: 40px;
  line-height: 36px;
}
.mapModal_bottom {
  padding: 12px;
  .detail {
    margin-top: 8px;
    display: flex;
    .mapModalBottomItem_number {
      flex: 1;
    }
  }
}
.mapModalBottomItem_label {
  width: 142px;
  font: 700 16px/1 "Adobe Heiti";
  color: #ffffff;
}
.mapModalBottomItem_number {
  width: 78px;
  font: 700 20px/1 "Adobe Heiti";
  color: #fbe671;
}
.mapModalBottomItem_label_tag {
  font: 700 20px/1 "Adobe Heiti";
  color: #fbe671;
}

.mapFootImg {
  position: absolute;
  width: 584px;
  height: 233px;
  left: 50%;
  margin-left: -297px;
  bottom: 0;
  z-index: 1;
}
</style>
